<template>
  <div class="container">
    <h1>缴费</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>区域</span>
        </div>
        <div class="input-right">
          <el-select
            v-model="region"
            placeholder="请选择区域"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>选择车位</span>
        </div>
        <div class="input-right">
          <el-select
            v-model="position"
            placeholder="请选择车位"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>收费类型</span>
        </div>
        <div class="input-right">
          <el-input v-model="payment_type" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>缴费人</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="payment_person"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>车牌号</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="car_id"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>停车时间</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="parking_time"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>停车时长</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="parking_duration"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>费用</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="cost"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>缴纳状态</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="payment_status"
            type="number"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>支付方式</span>
        </div>
        <div class="input-right">
          <el-select
            v-model="pay_method"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>备注</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="remark"
            :rows="5"
            type="textarea"
          />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('car/payment')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import to from "@/utils/to.js";
import dayjs from "dayjs";

const region = ref("");
const position = ref("");
const type = ref("");
const person = ref("");
const car_id = ref("");
const parking_time = ref("");
const parking_duration = ref("");
const cost = ref(0);
const payment_status = ref("");
const pay_method = ref("");
const remark = ref('');

const options1 = [
  {
    value: "A区",
    label: "A区",
  },
  {
    value: "B区",
    label: "B区",
  },
  {
    value: "C区",
    label: "C区",
  },
  {
    value: "D区",
    label: "D区",
  },
  {
    value: "E区",
    label: "E区",
  },
];

const options2 = [
  {
    value: "01",
    label: "01",
  },
  {
    value: "02",
    label: "02",
  },
  {
    value: "03",
    label: "03",
  },
  {
    value: "04",
    label: "04",
  },
  {
    value: "05",
    label: "05",
  },
];

const options3 = [
  {
    value: "微信",
    label: "微信",
  },
  {
    value: "支付宝",
    label: "支付宝",
  },
  {
    value: "线下缴费",
    label: "线下缴费",
  },
];

const addOrUpdate = () => {
  let config = {};

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/vehicleCost/add",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        name: floor_name.value,
        createTime: dayjs(create_time.value).format("YYYY-MM-DD"),
        houseUser: floor_use.value,
        floorAreas: floor_area.value,
        unitNum: unit_num.value,
        floorNum: unit_floor_num.value,
        elevator: elevator.value,
        storage: storage.value,
        detail: remark.value,
        communityId: "1",
      }
    }
  } else {
    config = {
      url: "http://localhost:8080/vehicleCost/update",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        name: floor_name.value,
        createTime: dayjs(create_time.value).format("YYYY-MM-DD"),
        houseUser: floor_use.value,
        floorAreas: floor_area.value,
        unitNum: unit_num.value,
        floorNum: unit_floor_num.value,
        elevator: elevator.value,
        storage: storage.value,
        detail: remark.value,
        communityId: "1",
      }
    };
  }
}
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}
</style>
